<template>
    <a-card :bordered="false">
        <div>
            <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
        <a-row  :gutter="[16,24]">
          <a-col :span="6">
            <span>主体名称:</span>
            <a-input placeholder="请输入主体名称" style="width: 150px;margin-left: 10px" v-model="requestParam.companyName"/>
          </a-col >

          <a-col :span="6">
            <span>注册手机号:</span>
            <a-input placeholder="请输入注册手机号" style="width: 150px;margin-left: 10px" v-model="requestParam.mobilePhone"/>
          </a-col>

          <a-col :span="6">
            <span>注册时间:</span>
            <a-input  style="width: 150px;margin-left: 10px" type="date"/>
          </a-col>

          <a-col :span="6">
            <span>是否有营业执照:</span>
            <a-select  placeholder="请输入用户状态" style="width: 150px;margin-left: 10px">
              <a-select-option value="1">可用</a-select-option>
              <a-select-option value="0">冻结</a-select-option>
            </a-select>
          </a-col>
        </a-row >

          <template v-if="toggleSearchStatus">
            <Area :queryParam="queryParam"></Area>

          <a-row :gutter="[16,24]">
            <a-col :span="6">
              <span>主体类型:</span>
              <a-select  placeholder="请选择主体类型" style="width: 150px;margin-left: 10px">
                <a-select-option value="1">可用</a-select-option>
                <a-select-option value="0">冻结</a-select-option>
              </a-select>
            </a-col>

            <a-col :span="6">
              <span>联系电话:</span>
              <a-input placeholder="请输入联系电话" style="width: 150px;margin-left: 10px" v-model="requestParam.companyName"/>
            </a-col >

            <a-col :span="6">
              <span>法人名称:</span>
              <a-input placeholder="请输入法人名称" style="width: 150px;margin-left: 10px" v-model="requestParam.companyName"/>
            </a-col >
          </a-row>
          </template>

          <a-row :gutter="[16,24]">
          <a-col :span="6">
            <a-button type="primary" icon="search" @click="loadUser">
              查询
            </a-button>
            <a-button type="primary" icon="reload" style="margin-left: 8px">
              重置
            </a-button>
            <a @click="handleToggleSearch" style="margin-left: 8px">
              {{ toggleSearchStatus ? '收起' : '展开' }}
              <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
            </a>
          </a-col>
          </a-row>

          <a-row :gutter="[16,24]">
            <a-button type="primary" icon="reload" style="margin-left: 6px">
              导出
            </a-button>
          </a-row>

          <a-row :gutter="[16,24]" style="margin-top: 30px">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{selectedRowKeys.length}}</a>项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="clearAll" >清空</a>
          </div>

          <a-table rowKey="id"
                   :data-source="data"
                   :pagination="pagination"
                   :scroll="{ x: 'calc(700px + 50%)', y: 500 }"
                   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
            <a-table-column title="注册手机号" data-index="mobilePhone" width="150px"></a-table-column>
            <a-table-column title="是否有营业执照" width="150px">
              <template slot-scope="text,record,index" >
                <span style="color: #00ff80" v-if="record.businessFlag==1">有</span>
                <span style="color:red" v-else>无</span>
              </template>
            </a-table-column>
              <a-table-column title="主体名称" data-index="companyName" width="150px"></a-table-column>
              <a-table-column title="法人名称" data-index="legalPersonName" width="150px"></a-table-column>
              <a-table-column title="统一社会信用代码" data-index="creditCode" width="150px"></a-table-column>
              <a-table-column title="证件号码" data-index="idNumber" width="150px"></a-table-column>
              <a-table-column title="注册资金(万元)" data-index="registerMoney" width="150px"></a-table-column>
              <a-table-column title="企业成立时间" data-index="foundTime" width="150px"></a-table-column>
              <a-table-column title="注册时间" data-index="registerTime" width="150px"></a-table-column>
              <a-table-column title="联系电话" data-index="phoneNumber" width="150px"></a-table-column>

            <a-table-column-group >
              <span slot="title">详细地址</span>
              <a-table-column data-index="province" align="center" width="100px">
                <span slot="title">省</span>
              </a-table-column>
              <a-table-column data-index="city" align="center" width="120px">
                <span slot="title">市</span>
              </a-table-column>
              <a-table-column data-index="area" align="center" width="160px">
                <span slot="title">区/县</span>
              </a-table-column>
              <a-table-column data-index="country" align="center" width="160px">
                <span slot="title">乡镇/街道</span>
              </a-table-column>
              <a-table-column data-index="detailAddress" align="center" width="260px">
                <span slot="title">地址</span>
              </a-table-column>
            </a-table-column-group>

            <a-table-column title="所属行业"  width="150px"  data-index="industryType">
              <template slot-scope="text,record,index">
                {{filterDictTextByCache('industry_type', text)}}
              </template>
            </a-table-column>
            <a-table-column title="主体类型" data-index="mainType" width="150px">
              <template slot-scope="text,record,index">
                {{filterDictTextByCache('main_type', text)}}
              </template>
            </a-table-column>
            <a-table-column title="生产类型" data-index="produceType" width="150px">
              <template slot-scope="text,record,index">
                {{filterDictTextByCache('produce_type', text)}}
              </template>
            </a-table-column>
            <a-table-column title="营业执照" data-index="businessLicenseUrl" width="150px">
              <template slot-scope='text,record,index'>
                <span v-if='!text' style='font-size: 12px;font-style: italic;'>无图片</span>
                <!--imgClickView点击查看，getImgView列表默认展示-->
                <img v-else :src='getImgView(text)' height='25px' alt=''
                     style='max-width:80px;font-size: 12px;font-style: italic;cursor: pointer;' @click='imgClickView(text)'/>
                <duo-image-viewer :list="imgSrcList"
                                  @update:show="handleClose"
                                  :show="showViewer" :currentIndex="currentIndex"/>
              </template>
            </a-table-column>
            <a-table-column title="认证资质" data-index="certificationQualificationUrl" width="150px"></a-table-column>
            <a-table-column title="品牌logo" data-index="logoUrl" width="150px"></a-table-column>
            <a-table-column title="照片墙" data-index="photoWall" width="150px"></a-table-column>
            <a-table-column title="审核状态" data-index="examineStatus" width="150px"></a-table-column>
            <a-table-column title="审核时间" data-index="examineTime" width="150px"></a-table-column>
            <a-table-column title="操作" width="110px" fixed="right">
              <template slot-scope="text,record,index">
                <a @click="editUserMethod(record)">编辑</a>
                <a-dropdown>
                  <a >
                    更多 <a-icon type="down"/>
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a href="javascript:;" >详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a href="javascript:;" >删除</a>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </a-table-column>
          </a-table>
          </a-row>

          <a-pagination v-model="requestParam.current" :total="requestParam.total" :pageSize="requestParam.pageSize" @change="onChange"  style="margin-top: 30px" show-less-items/>
          <a-modal v-model="ShowModal" title="会员编辑" width="40%" >
            <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" :model="editUser">
              <a-form-model-item prop="companyName" label="主体名称:"><a-input  style="width: 200px" v-model="editUser.companyName" /></a-form-model-item>
              <a-form-model-item label="注册手机号:"><a-input  style="width: 200px" v-model="editUser.mobilePhone" disabled/></a-form-model-item>
              <a-form-model-item label="所属行业:">
                <span v-model="editUser.industryType">
                  {{filterDictTextByCache('industry_type', editUser.industryType)}}
                </span>
              </a-form-model-item>
              <a-form-model-item label="是否有营业执照:">
                <template slot-scope="text,record,index" >
                  <a-radio-group v-model="editUser.businessFlag">
                    <a-radio-button :value="1">
                      有
                    </a-radio-button>
                    <a-radio-button :value="0">
                      无
                    </a-radio-button>
                  </a-radio-group>
                </template></a-form-model-item>
              <a-form-model-item label="法人名称:"><a-input  style="width: 200px" v-model="editUser.legalPersonName" disabled/></a-form-model-item>
              <a-form-model-item label="统一社会信用代码:"><a-input  style="width: 200px" v-model="editUser.creditCode" disabled/></a-form-model-item>
              <a-form-model-item label="证件号码:"><a-input  style="width: 200px" v-model="editUser.idNumber" disabled/></a-form-model-item>
              <a-form-model-item label="营业执照:" >
                  <span v-if='!editUser.businessLicenseUrl' style='font-size: 12px;font-style: italic;' >无图片</span>
                  <!--imgClickView点击查看，getImgView列表默认展示-->
                  <img v-else :src='getImgView(editUser.businessLicenseUrl)' height='25px' alt=''
                       style='max-width:80px;font-size: 12px;font-style: italic;cursor: pointer;' @click='imgClickView(editUser.businessLicenseUrl)'/>
                <duo-image-viewer :list="imgSrcList"
                                  @update:show="handleClose"
                                  :show="showViewer" :currentIndex="currentIndex"/>
              </a-form-model-item>

          </a-form-model>
          </a-modal>
        </div>
    </a-card>
</template>

<script>
    //定义引入的js插件
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import AFormModelItem from "ant-design-vue/es/form-model/FormItem";
    import {getAction} from '@/api/manage';
    import {getDictItemsFromCache} from  '@/api/api';
    import  '@/api/index';
    import Area from "../../../components/njt/Area";
    export default {
      components: {Area, AFormModelItem, ACol, ARow},
      data() {
        let validateDeptName = (rule, value, callback) => {
           console.log(value);
           console.log(rule);
          if (value === '') {
            callback(new Error('部门名称不能为空'));
          } else {
            callback();
          }
        };
            return {
                //定义组件中关联属性
              rootUrl: '/njt-area/listRoot',//根节点请求路径
              childrenUrl: '/njt-area/listChildren',//子节点加载路径
              queryParam:{},
              toggleSearchStatus:false,
              pagination:false,
              ShowModal:false,
              editUser:{companyName:'',},
              labelCol: { span: 6 },
              wrapperCol: { span: 16 },
              currentIndex: 0, // 打开图片查看器时，需要定位到的图片的索引
              imgSrcList: [], // 图片查看器数据集
              showViewer: false, // 是否打开图片查看器
              requestParam:{
                current: 1,
                pageSize: 5,
                total: 9,
                companyName:'',
                mobilePhone:'',
              },
              data: [],
              selectedRowKeys: [],
              selectedRows: [],
              rules: {
                companyName: [
                  { validator: validateDeptName, trigger: 'change' }
                ],
              },
              provinceList:[],
              cityList:[],
              areaList:[],
              countryList:[],
            }
        },
        methods: {
            //定义组件事件关联方法
          handleToggleSearch(){
            this.toggleSearchStatus = !this.toggleSearchStatus;
          },
          editUserMethod(record){
            this.ShowModal=true
            this.editUser = Object.assign({},record)
            console.log(this.editUser.businessLicenseUrl)
          },
          onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
          },
          clearAll(){
            this.selectedRowKeys=[];
          },
          loadUser(){
            var url = "/njt-user-perfect/page"
            getAction(url,this.requestParam).then((res) => {
              // 在原生开发中获取后端响应数据是通过：res.data
              // 为什么现在不使用data就可以获取到后端响应数据
              // 原因：就是因为有响应拦截器，拦截器中已经处理了，将后端响应对象数据获取传入参数res
              if (res.success) {
                this.msg = res.result;
                this.data=res.result.records;
                this.requestParam.total=res.result.total;
              }
            })
          },
          onChange(){
            this.requestParam.current=this.current;
            this.loadUser();
          },
          //从字典中获取数据方法。参数1为字典标识名 参数2为字典项key值 ，方法返回字段key表示的中文
          filterDictTextByCache(dictCode, key) {
            if(key==null ||key.length==0){
              return;
            }
            if (!dictCode) {
              return '字典Code不能为空!';
            }
            //优先从缓存中读取字典配置
            if(getDictItemsFromCache(dictCode)){
              let item = getDictItemsFromCache(dictCode).filter(t => t["value"] == key)
              if(item && item.length>0){
                return item[0]["text"]
              }
            }
          },
          getImgView(text){
            if(text && text.indexOf(",")>0){
              text = text.substring(0,text.indexOf(","))
            }
            return text;
          },
          /** 多图片点击预览 */
          imgClickView(text){
            // 将图片路径处理一下
            let srcArray = text.split(",")
            let srcAllArray= []
            srcArray.forEach((temp)=>{
              srcAllArray.push(this.getImgView(temp))
            })
            this.imgSrcList = srcAllArray;
            this.showViewer = !this.showViewer
          },

          // // 多图片查看器打开
          handleOpen() {
            this.showViewer = !this.showViewer
          },
          // 多图片查看器关闭
          handleClose() {
            this.showViewer = false
          },
            // 查询所有省份
            initRootList(){
              getAction(this.rootUrl).then(res=>{
                if(res.success){
                  this.provinceList = res.result
                }
              })
            },
            cityInit(value){
              getAction(this.childrenUrl,{parentCode:value}).then(res=>{
                if(res.success){
                  this.cityList = res.result
                }
              })
            },
          areaInit(value){
            getAction(this.childrenUrl,{parentCode:value}).then(res=>{
              if(res.success){
                this.areaList = res.result
              }
            })
          },
          countryInit(value){
            getAction(this.childrenUrl,{parentCode:value}).then(res=>{
              if(res.success){
                this.countryList = res.result
              }
            })
          },
        },
        created() {//页面加载前执行的操作
            this.loadUser();
        }
    }
</script>